<template>
  <el-dialog
    class="ba-operate-dialog"
    :close-on-click-modal="false"
    :model-value="baTable.form.operate ? true : false"
    @close="baTable.toggleForm"
  >
    <template #header>
      <div class="title" v-drag="['.ba-operate-dialog', '.el-dialog__header']">
        {{ baTable.form.operate !== "edit" ? "添加" : "编辑" }}
      </div>
    </template>
    <el-scrollbar
      v-loading="baTable.form.loading"
      class="ba-table-form-scrollbar"
    >
      <div
        class="ba-operate-form"
        :class="'ba-' + baTable.form.operate + '-form'"
        :style="'width: calc(100% - ' + baTable.form.labelWidth! / 2 + 'px)'"
      >
        <el-form
          ref="formRef"
          @keyup.enter="baTable.onSubmit(formRef)"
          :model="baTable.form.items"
          label-position="right"
          :label-width="baTable.form.labelWidth + 'px'"
          :rules="rules"
          v-if="!baTable.form.loading"
        >
          <el-form-item
            v-if="baTable.form.items!.siteType===getDistrictNum('地区')"
            label="上级站点"
            prop="parentId"
          >
            <el-tree-select
              v-model="baTable.form.items!.parentId"
              :data="state.siteOptions"
              check-strictly
              :props="{
                label: 'siteName',
                value: 'siteId',
                children: 'children',
              }"
              :render-after-expand="false"
              @node-click="siteChange"
            />
          </el-form-item>
          <el-form-item
            v-if="baTable.form.items!.siteType===getDistrictNum('地区')"
            label="站点名称"
            prop="siteName"
          >
            <el-input
              v-model="baTable.form.items!.siteName"
              placeholder="请输入站点名称"
            />
          </el-form-item>
          <el-form-item
            v-if="baTable.form.items!.siteType===getDistrictNum('地区')"
            label="站点类型"
            prop="siteType"
          >
            <el-select
              v-model="baTable.form.items!.siteType"
              placeholder="请选择站点类型"
            >
              <el-option
                v-for="item in site.type"
                :key="item.dictCode"
                :label="item.dictLabel"
                :value="item.dictValue - 0"
                :disabled="item.dictLabel !== '地区'"
              ></el-option>
            </el-select>
            <div class="block-help" style="width: 100%">
              非地区类型站点为自动添加
            </div>
          </el-form-item>
          <el-form-item label="显示排序" prop="siteOrder">
            <el-input-number
              v-model="baTable.form.items!.siteOrder"
              controls-position="right"
            />
          </el-form-item>
          <el-form-item label="启用时间" prop="startTime">
            <el-date-picker
              v-model="baTable.form.items!.startTime"
              type="datetime"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
              :disabled-date="pickerOptions"
            />
            <div class="block-help" style="width: 100%">双击下拉选择</div>
          </el-form-item>
          <el-form-item label="停用时间" prop="stopTime">
            <el-date-picker
              v-model="baTable.form.items!.stopTime"
              type="datetime"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
              :disabled-date="pickerOptions"
            />
            <div class="block-help" style="width: 100%">双击下拉选择</div>
          </el-form-item>
          <el-form-item label="备注">
            <el-input
              v-model="baTable.form.items!.siteRemark"
              type="textarea"
              :autosize="{ minRows: 2, maxRows: 5 }"
            ></el-input>
          </el-form-item>
        </el-form>
      </div>
    </el-scrollbar>
    <template #footer>
      <div
        :style="'width: calc(100% - ' + baTable.form.labelWidth! / 1.8 + 'px)'"
      >
        <el-button @click="baTable.toggleForm('')">取消</el-button>
        <el-button
          v-blur
          :loading="baTable.form.submitLoading"
          @click="baTable.onSubmit(formRef)"
          type="primary"
        >
          <!-- {{ baTable.form.operate === "itemAdd" ? "确定并新增下一项" : "确定" }} -->
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script lang="ts" setup>
import { reactive, ref, inject, onMounted } from "vue";
import type baTableClass from "@/utils/baTable";
import type { ElForm, FormItemRule, FormRules } from "element-plus";
import FormItem from "@/components/formItem/index.vue";
import { useUser } from "@/store/backend/SysM/user";
import { useDictionary } from "@/store/backend/tool/dictionary";

type Option = {
  id: number;
  label: string;
  children: Option[];
};
const user = useUser();
//接受来自父组件的注入
const baTable = inject("baTable") as baTableClass;
const formRef = ref<InstanceType<typeof ElForm>>();
const dictionary = inject("dictionary") as any;
const site = inject("site") as any;

const state: {
  siteOptions: Option[];
  deptTypeOptions: any[];
} = reactive({
  siteOptions: [], //部门列表
  deptTypeOptions: [], //部门类型列表
});
const rules = reactive<FormRules>({
  siteName: [{ required: true, message: "站点名称不能为空", trigger: "blur" }],
  siteOrder: [{ required: true, message: "显示排序不能为空", trigger: "blur" }],
});

//获取站点管理中的不同类型值
const getDistrictNum = (val: string) => {
  let len = site.type.length;
  for (let i = 0; i < len; ) {
    if (site.type[i].dictLabel === val) {
      return site.type[i].dictValue - 0;
    } else {
      i++;
    }
  }
};

//限制用户只能选择当天之后日期
const pickerOptions = (time: Date) => {
  return time.getTime() < Date.now() - 1 * 24 * 60 * 60 * 1000;
};

//   //获取工作中心/现部门类型字典
//   const getMenuStatus = () => {
//     if (
//       JSON.stringify(dictionary.moreTags) == "{}" ||
//       !JSON.stringify(dictionary.moreTags["deptType"])
//     ) {
//       dictionary.getDictInfo("sys_workshop_type").then((res: any) => {
//         dictionary.moreTags["deptType"] = getDictData(res);
//         state.deptTypeOptions = res;
//         console.log("获取工作中心类型的字典", state.deptTypeOptions);
//       });
//     }
//   };
//   //获取部门类型字典
//   getMenuStatus();

//选择上级站点
const siteChange = (val: any, checked: boolean, childChecked: boolean) => {
  baTable.form.items!.parentId = val.siteId;
  baTable.form.items!.parentName = val.siteName;
  console.log("选择上级站点", val, baTable.form.items);
};

onMounted(() => {
  //获取站点数据列表
  site.getOrigin().then((res: any) => {
    state.siteOptions = res;
    console.log("state.siteOptions", state.siteOptions);
  });
});
</script>
<style lang="scss" scoped>
.el-scrollbar {
  height: 500px;
  overflow-y: auto;
}
</style>
